<template>
  <view class="zen-search-container">
    <!-- 搜索栏 -->
    <view class="search-header">
      <view class="search-bar">
        <image class="search-icon" src="/static/icons/search.png"></image>
        <input type="text" v-model="searchKeyword" placeholder="寻觅禅意好物..." confirm-type="search" @confirm="onSearch" class="search-input" />
        <view v-if="searchKeyword" class="clear-icon" @tap="clearSearch">
          <text class="icon">×</text>
        </view>
      </view>
      <text class="cancel-btn" @tap="goBack">取消</text>
    </view>
    <!-- 搜索历史 -->
    <view class="history-section" v-if="searchHistory.length > 0 && !searchKeyword">
      <view class="section-header">
        <text class="section-title">搜索历史</text>
        <image class="delete-icon" src="/static/icons/delete.png" @tap="clearHistory"></image>
      </view>
      <view class="history-tags">
        <view class="history-tag" v-for="(item, index) in searchHistory" :key="index" @tap="useHistoryItem(item)">
          <text>{{item}}</text>
        </view>
      </view>
    </view>
    
    <!-- 热门搜索 -->
    <view class="hot-section" v-if="!searchKeyword">
      <view class="section-header">
        <text class="section-title">热门搜索</text>
      </view>
      <view class="hot-tags">
        <view class="hot-tag" v-for="(item, index) in hotSearches" :key="index" @tap="useHistoryItem(item)">
          <text class="tag-rank" v-if="index < 3">{{index+1}}</text>
          <text class="tag-rank tag-normal" v-else>{{index+1}}</text>
          <text class="tag-text">{{item}}</text>
        </view>
      </view>
    </view>
    
    <!-- 搜索结果 -->
    <view class="search-results" v-if="searchKeyword && hasSearched">
      <view v-if="searchResults.length === 0" class="no-result">
        <image class="no-result-img" src="/static/images/no-result.png"></image>
        <text class="no-result-text">暂无相关商品，换个关键词试试</text>
      </view>
      <view v-else class="result-list">
        <view class="result-item" v-for="(item, index) in searchResults" :key="index" @tap="goToDetail(item)">
          <image class="item-image" :src="item.image" mode="aspectFill"></image>
          <view class="item-info">
            <text class="item-name">{{item.name}}</text>
            <text class="item-desc">{{item.description}}</text>
            <view class="item-bottom">
              <text class="item-price">¥{{item.price}}</text>
              <text class="item-sales">{{item.sales}}人已购</text>
			  
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 搜索推荐 -->
    <view class="search-suggestions" v-if="searchKeyword && !hasSearched && searchSuggestions.length > 0">
      <view class="suggestion-item" v-for="(item, index) in searchSuggestions" :key="index" @tap="useHistoryItem(item)">
        <image class="suggestion-icon" src="/static/icons/search-small.png"></image>
        <text class="suggestion-text">{{item}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { productListApi } from '../../api/product';

export default {
  data() {
    return {
      searchKeyword: '',
      hasSearched: false,
      searchHistory: [],
      hotSearches: ['禅意茶具', '线香', '冥想垫', '佛珠手串', '香炉', '禅意画', '茶道套装', '花器'],
      searchSuggestions: [],
      searchResults: []
    }
  },
  watch: {
    searchKeyword(newVal) {
      if (newVal) {
        // 模拟搜索建议
        this.searchSuggestions = this.hotSearches.filter(item => item.includes(newVal));
        this.hasSearched = false;
      } else {
        this.searchSuggestions = [];
        this.hasSearched = false;
      }
    }
  },
  methods: {
    onSearch() {
      if (!this.searchKeyword.trim()) return;
      
      // 添加到搜索历史
      if (!this.searchHistory.includes(this.searchKeyword)) {
        this.searchHistory.unshift(this.searchKeyword);
        // 最多保存10条历史记录
        if (this.searchHistory.length > 10) {
          this.searchHistory.pop();
        }
      }
      
      // 模拟搜索结果
      this.hasSearched = true;
      // 这里应该调用实际的搜索API
	  productListApi({
		  product_name:this.searchKeyword
	  }).then((res)=>{
		  this.searchResults = res.list.data?.map((item)=>{
			  return {
				  id: item.product_id,
				  name: item.product_name,
				  description: item.selling_point,
				  price: item.product_price,
				  sales: item.product_sales,
				  image: item.product_image
			  }
		  })
	  })
    },
    clearSearch() {
      this.searchKeyword = '';
      this.hasSearched = false;
      this.searchResults = [];
    },
    goBack() {
      uni.navigateBack();
    },
    clearHistory() {
      this.searchHistory = [];
    },
    useHistoryItem(item) {
      this.searchKeyword = item;
      this.onSearch();
    },
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/shapping/detail?id=${item.id}`
      });
    }
  }
}
</script>

<style>
.zen-search-container {
  background-color: #F8F5F0; /* 米白色背景 */
  min-height: 100vh;
  padding-bottom: 30rpx;
}

/* 搜索头部 */
.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #F8F5F0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.search-bar {
  flex: 1;
  height: 70rpx;
  background-color: #EEEAE3; /* 浅灰色搜索框 */
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: relative;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  font-size: 28rpx;
  font-family: "思源宋体", sans-serif;
  color: #5C4B3A; /* 檀木棕色文字 */
}

.clear-icon {
  padding: 0 10rpx;
}

.clear-icon .icon {
  font-size: 40rpx;
  color: #999;
}

.cancel-btn {
  font-size: 28rpx;
  color: #8C7B68; /* 檀木棕色淡化 */
  margin-left: 20rpx;
  font-family: "思源宋体", sans-serif;
}

/* 搜索历史和热门搜索公共样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: #5C4B3A; /* 檀木棕色 */
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.delete-icon {
  width: 32rpx;
  height: 32rpx;
}

/* 搜索历史标签 */
.history-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;
}

.history-tag {
  background-color: #EEEAE3; /* 浅灰色 */
  padding: 10rpx 30rpx;
  margin: 10rpx;
  border-radius: 30rpx;
}

.history-tag text {
  font-size: 26rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
}

/* 热门搜索标签 */
.hot-tags {
  padding: 0 30rpx;
}

.hot-tag {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #EEEAE3;
}

.tag-rank {
  width: 40rpx;
  height: 40rpx;
  background-color: #E8C872; /* 佛经黄 */
  color: white;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
  margin-right: 20rpx;
  border-radius: 6rpx;
}

.tag-normal {
  background-color: #C9C1B6; /* 灰色 */
}

.tag-text {
  font-size: 28rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
}

/* 搜索结果 */
.search-results {
  padding: 20rpx 30rpx;
}

.no-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
}

.no-result-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.no-result-text {
  font-size: 28rpx;
  color: #8C7B68;
  font-family: "思源宋体", sans-serif;
}

.result-list {
  padding: 10rpx 0;
}

.result-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #EEEAE3;
}

.item-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  background-color: #EEEAE3;
  margin-right: 20rpx;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-name {
  font-size: 28rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.item-desc {
  font-size: 24rpx;
  color: #8C7B68;
  font-family: "思源宋体", sans-serif;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-price {
  font-size: 32rpx;
  color: #5C8D69; /* 青瓷绿 */
  font-family: "思源宋体", sans-serif;
  font-weight: bold;
}

.item-sales {
  font-size: 24rpx;
  color: #8C7B68;
  font-family: "思源宋体", sans-serif;
}

/* 搜索推荐 */
.search-suggestions {
  background-color: white;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #EEEAE3;
}

.suggestion-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 20rpx;
}

.suggestion-text {
  font-size: 28rpx;
  color: #5C4B3A;
  font-family: "思源宋体", sans-serif;
}
</style>